<template>
  <div>
    <input type="checkbox" v-model="allCheck">
    <span>已完成{{ count }}/全部{{ todoList.length }}</span>
    <button @click="delDone">清除已完成的任务</button>
  </div>
</template>

<script>
export default {
  name: 'TodoFooter',
  props: ['todoList', 'chooseAll','delCompleted'],
  computed: {
    count() {
      return this.todoList.reduce((pre, cur) => pre + (cur.completed ? 1 : 0), 0)
    },
    allCheck: {
      get() {
        return this.todoList.length === this.count && this.todoList.length > 0
      },
      set(val) {
        this.chooseAll(val)
      }
    }
  },
  methods: {
    delDone() {
      this.delCompleted()
    }
  }
}
</script>